<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:p="http://primefaces.org/ui"
		xmlns:pe="http://primefaces.org/ui/extensions"
		xmlns:pt="http://primefaces.org/ecuador"
		xmlns:o="http://omnifaces.org/ui"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
		xmlns:s="http://skyve.org/xml/ui"
		dir="#{bean.dir}">
	<f:view contentType="text/html" encoding="UTF-8">
		<h:head>
			<f:facet name="first">
				<meta http-equiv="X-UA-Compatible" content="IE=edge" />
            	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            	<meta name="apple-mobile-web-app-capable" content="yes" />
			</f:facet>
	
			<title>${project.description}</title>
			<base href="#{bean.baseHref}" />
			<!-- normally commented out for security reasons
			<h:outputText value="#{bean.skyveVersionComment}" escape="false" />
			-->	
			<ui:include src="/WEB-INF/pages/includes/favicon.xhtml" />
<!--
			<link type="text/css" rel="stylesheet" href="css/primeflex.min.css?v=#{bean.webResourceFileVersion}" />
-->
			<link type="text/css" rel="stylesheet" href="css/prime-min.css?v=#{bean.webResourceFileVersion}" />
			<h:outputStylesheet name="css/ecuador.css" library="skyve" />
			<link type="text/css" rel="stylesheet" href="pages/css/admin.css" />
			
			<h:outputScript name="js/nanoscroller.js" library="ecuador-layout" />
			<h:outputScript name="js/layout.js" library="ecuador-layout" />
	
			<script type="text/javascript" src="prime/skyve-min.js?v=#{bean.webResourceFileVersion}"></script>
			<script type="text/javascript">
				<!-- PF8 doesnt work with touch on - a.swipe is not a function when registering swipeLeft and swipeRight -->
				PrimeFaces.env.touch=false;
				SKYVE.Util.setTouchCookie();
				#{bean.apiScript}
				SKYVE.PF.establishHistory();
			</script>
			<ui:insert name="templateHead" />
		</h:head>
	
		<h:body styleClass="main-body layout-compact">
			<h:panelGroup styleClass="skyveEnvBanner skyveTopEnvBanner" rendered="#{not empty bean.environmentIdentifier}">#{bean.environmentIdentifier}</h:panelGroup>
			<h:panelGroup styleClass="skyveEnvBanner skyveBottomEnvBanner" rendered="#{not empty bean.environmentIdentifier}">#{bean.environmentIdentifier}</h:panelGroup>
			<div class="#{showMenu ? 'layout-wrapper layout-menu-static layout-menu-light' : 'layout-wrapper layout-menu-light'}">
	
				<ui:include src="./topbar.xhtml">
					<ui:param name="showMenu" value="#{showMenu}" />
					<ui:param name="showSwitchMode" value="#{showSwitchMode}" />
					<ui:param name="showLogout" value="#{showLogout}" />
					<ui:param name="title" value="#{bean.title}" />
					<ui:param name="bean" value="#{bean}" />
				</ui:include>
	
				<!-- Include the menu if we need to show topbar dropdown as otherwise the dropdown click event is not registered -->
				<c:if test="#{not showMenu and (showSwitchMode or showLogout)}">
					<pt:menu />
				</c:if>
				
<!-- Menu accordions do not open at all when expanded on server menu model and no cookie set
				<s:resetMenuState rendered="#{resetMenu}" />
-->
				<h:panelGroup layout="block" styleClass="layout-sidebar" rendered="#{showMenu}">
					<div class="nano">
						<div class="nano-content menu-scroll-content">
							<h:form id="menuform" prependId="false">
								<pt:menu widgetVar="leftMenu" id="leftMenu" model="#{menu.menu}" />
							</h:form>
						</div>
					</div>
				</h:panelGroup>
				
				<div class="layout-main">
					<p:messages id="messages" widgetVar="messages" globalOnly="true" escape="false">
						<p:autoUpdate />
					</p:messages>
					<p:growl id="growl" widgetVar="growl" globalOnly="true" escape="false">
						<p:autoUpdate />
					</p:growl>
					<!-- Do not establish a socket for a public user (user in session but no principal established) -->
					<o:socket id="socket" widgetVar="socket" channel="skyve" user="#{sessionScope['user'].id}" onmessage="function(message) { SKYVE.PF.onPushMessage(message) }" rendered="#{not empty request.remoteUser}" />
					<!-- Need separate growl for push coz autoUpdated growl wont respond through javascript -->
					<p:growl id="pushGrowl" widgetVar="pushGrowl" for="push" escape="false" />
					<p:tooltip id="help" widgetVar="help" globalSelector="i" escape="false" />
					<p:confirmDialog id="confirm" global="true">
						<p:commandButton id="confirmCancel" 
											value="Cancel" 
											type="button"
											styleClass="ui-confirmdialog-no" 
											style="float:right;"
											icon="fa fa-remove" />
						<p:commandButton id="confirmOK" 
											value="OK" 
											type="button"
											styleClass="ui-confirmdialog-yes" 
											style="float:right;"
											icon="fa fa-check" />
					</p:confirmDialog>
					
					<div class="layout-content" style="min-height:300px">
						<ui:insert name="templateBody" />
					</div>
					
					<div class="layout-footer">
						<div class="ui-g">
							<div class="ui-g-12">
					            <div id="footer-menu">
					            	<div class="ui-g-12 ui-md-12 ui-lg-3 logo-container-outer">
							            <a href="#{bean.baseHref}" styleClass="logo-container">
							                <h:graphicImage name="images/skyve-thick-grey.png" style="max-height: 30px;" library="skyve" />
							            </a>
							        </div>
							        <div class="ui-g-12 ui-md-4 ui-lg-3 footer-box">
							        	<span class="app-name">${project.description}</span>
							        </div>
							        <div class="ui-g-12 ui-md-4 ui-lg-3 footer-box">
							        	<span>Version ${project.version}</span>
							        </div>
							        <div class="ui-g-12 ui-md-4 ui-lg-3 footer-box">
							        	<span><i class="fa fa-copyright"></i> All Rights Reserved</span>   
							        </div>
					            </div>
							</div>
						</div>
                	</div>
				</div>
			</div>
	
			<p:ajaxStatus style="width:32px;height:32px;position:fixed;right:7px;bottom:7px">
				<f:facet name="start">
					<i id="busy" class="fa fa-2x fa-circle-o-notch fa-spin ajax-loader" aria-hidden="true"></i>
				</f:facet>
				<f:facet name="complete">
					<h:outputText value="" />
				</f:facet>
			</p:ajaxStatus>
	
			<h:outputStylesheet name="css/nanoscroller.css" library="ecuador-layout" />
			<h:outputStylesheet name="#{'css/layout-'.concat(skyve.getThemeColour('indigo')).concat('.css')}" library="ecuador-layout" />
		</h:body>
	</f:view>
</html>
